<template>
	<view class="">
		<u-popup :show="show" round="12rpx" mode="center" :safeAreaInsetBottom='false'>
			<view class="hint bgf br12">
				<view class="hinta flex_c cf fw500 fs34" :style="[bgColor]">{{title}}</view>
				<view class="flex_c mt30">
					<image class="wcaImg" src="/static/index/serve/cg.png" mode=""></image>
				</view>
			</view>
		</u-popup>
	</view>

	<!-- 使用 
	     	<hintBox :show.sync="hintShow" title='提交成功' color='#2A71C0'></hintBox>
		 说明:'定时关闭弹窗'
	 -->


</template>

<script>
	/*
	 *color 主题色
	 */
	export default {
		props: {
			title: {
				default: "温馨提示",
			},
			show: {
				typeof: Boolean,
				default: false,
			},
			time: {
				typeof: Number,
				default: 2000,
			},
			color: {
				typeof: String,
				default: '#23D371',
			}
		},
		components: {},
		data() {
			return {
				settim: null, //定时器
			}
		},
		mounted() {

		},
		beforeDestroy() {
			clearTimeout(this.settim)
			this.settim = null
		},
		methods: {
			cancel() { //自动关闭
				this.settim = setTimeout(() => {
					this.$emit('update:show', false)
				}, this.time)
			}
		},

		computed: {
			bgColor() {
				return {
					background: this.color
				}
			}
		},
		watch: {
			show: {
				handler(news, old) {
					if (news) {
						this.cancel()
					}
				},
				deep: true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hint {
		width: 520upx;
		min-height: 378upx;
		overflow: hidden;

		.hinta {
			height: 124upx;
		}

		.hint_btn {
			margin: 70upx 30upx 30upx 30upx;

			.hint_btna {
				width: 200upx;
				height: 72upx;
				border: 2upx solid #fff;
			}
		}
	}
</style>
